<template>
	<view class="busin-container">
		<tn-form :rules="rules" :labelWidth="170" :model="form" ref="form" :errorType="['toast']">
			<tn-form-item label="计算方式" prop="way">
				<tn-radio-group v-model="form.way">
					<tn-radio v-for="(item, index) in wayTypes" :key="index" :name="item.value">{{item.label}}</tn-radio>
				</tn-radio-group>
			</tn-form-item>
			<block v-if="form.way !== '1'">
				<tn-form-item label="单价" prop="unit">
					<tn-input v-model="form.unit" placeholder="请输入单价" @input="unitInput"></tn-input>
					<view>元/㎡</view>
				</tn-form-item>
				<tn-form-item label="面积" prop="area">
					<tn-input v-model="form.area" :clearable="false" placeholder="请输入房屋面积" type="number" @input="areaInput"></tn-input>
					<view>㎡</view>
				</tn-form-item>
			</block>
			<tn-form-item label="房屋总价" prop="totalPrice">
				<tn-input v-model="form.totalPrice" :clearable="false" placeholder="请输入房屋总价" type="number" @input="totalPriceInput" :disabled="form.way !== '1'">
				</tn-input>
				<view>万元</view>
			</tn-form-item>
			<tn-form-item label="贷款成数" prop="percentage" @click="showPercentage = true;hideKeyboard();">
				<view @click="showPercentage = true;" class="selectItem">{{ form.percentage }}成</view>
			</tn-form-item>

			<tn-form-item label="贷款金额" prop="amount">
				<tn-input v-model="form.amount" type="number" disabled></tn-input>
				<view>万元</view>
			</tn-form-item>

			<tn-form-item label="贷款年限" prop="years" @click="showYears = true;hideKeyboard();">
				<view @click="showYears = true;" class="selectItem">{{ form.years }}年</view>
			</tn-form-item>

			<tn-form-item label="利率方式" prop="way">
				<tn-radio-group v-model="form.rate">
					<tn-radio :customStyle="{ marginRight: '16px' }" v-for="(item, index) in rateTypeArr" :key="index" :name="item.value">{{item.label}}</tn-radio>
				</tn-radio-group>
			</tn-form-item>

			<tn-form-item v-if="form.rate == '1'" label="商贷利率" @click="showBaseRate = true;hideKeyboard();">
				<view @click="showBaseRate = true;" class="selectItem">{{ form.baseRate }}</view>
			</tn-form-item>
			<block v-if="form.rate == '2'">
				<tn-form-item label="LPR" prop="lpr">
					<tn-input v-model="form.lpr" @input="LprInput" placeholder="请输入商贷LPR" type="number" maxlength="10">
					</tn-input>
					<view>%</view>
				</tn-form-item>
				<tn-form-item label="基点" prop="point">
					<tn-input v-model="form.point" @input="pointInput" placeholder="请输入基点" type="number" maxlength="10">
					</tn-input>
					<view>‱</view>
				</tn-form-item>
			</block>
		</tn-form>

		<view class="dengyu" v-if="form.rate === '1'">= {{ form.rateNum }} %</view>
		<view class="dengyu" v-else>= {{ form.rateLpr }} %</view>
		<tn-select v-model="showPercentage" :searchShow="false" mode="single" title="请选择贷款成数" :list="percentageArray" @confirm="percentageSelect"></tn-select>
		<tn-select v-model="showYears" :searchShow="false" mode="single" title="请选择贷款年数" :list="yearArray" @confirm="yearsSelect"></tn-select>
		<tn-select v-model="showBaseRate" :searchShow="false" mode="single" title="请选择商贷利率" :list="rateList" @confirm="baseRateSelect"></tn-select>
	</view>
</template>

<script>
	import { percentageArray, wayTypes, rateTypeArr, rateList } from './enum.js';
	export default {
		components: {},
		data() {
			return {
				wayTypes,
				percentageArray,
				rateList,
				rateTypeArr,
				showPercentage: false,
				showYears: false,
				showBaseRate: false,
				yearArray: [],
				form: {
					// 计算方式
					way: '1',
					rate: '1',
					// 房屋总价
					totalPrice: '',
					// 贷款多少成
					percentage: 7,
					// 贷款金额
					amount: '',
					// 年限 * 12
					years: 20,
					// 显示利率
					rateNum: 0.49,
					// 基准利率
					baseRate: 0.049,
					// lpr显示利率
					rateLpr: 4.65,
					// lpr 利率
					lpr: 4.65,
					// 基点
					point: null,
					// 单价
					unit: null,
					// 面积
					area: null
				},
				rules: {
					totalPrice: [{
						required: true,
						message: '请输入房屋总价'
					}],
					amount: [{
						required: true,
						message: '请输入贷款金额'
					}]
				}
			};
		},
		watch: {
			form: {
				handler: function(newvalue) {
					// console.log(newvalue);
				},
				deep: true
			}
		},
		created() {
			for (let i = 1; i <= 30; i++) {
				this.yearArray.push({
					value: i * 12,
					label: `${i}年`
				});
			}
		},
		onLoad() {},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
						const obj = {
							totalPrice: this.form.totalPrice,
							loanMoney: this.form.amount,
							months: this.form.years,
							rate: this.form.way === '1' ? this.form.baseRate : this.form.rateLpr / 100,
							payMoney: ((1 - this.form.percentage / 10) * this.form.totalPrice).toFixed(2),
							type: this.form.way
						};
						this.$emit('submit', obj);
					})
					.catch(errors => {
						uni.$u.toast(errors[0].message);
					});
			},
			// 房屋总价输入框事件
			totalPriceInput(val) {
				this.form.amount = (Number(this.form.totalPrice) * this.form.percentage / 10).toFixed(2);
			},
			// lpr
			LprInput(val) {
				console.log(Number(val), 'Lpr');
			},
			//  基点
			pointInput(val) {
				if (this.form.lpr) {
					this.form.rateLpr = (this.form.lpr + Number(val) / 100).toFixed(2);
				} else {
					this.form.rateLpr = (Number(val) / 100).toFixed(2);
				}
			},
			unitInput(val) {
				if (this.form.area) {
					this.form.totalPrice = (this.form.area * Number(val)) / 10000;
					this.form.amount = (this.form.totalPrice * this.form.percentage / 10).toFixed(2);
				}
			},
			areaInput(val) {
				if (this.form.unit) {
					this.form.totalPrice = (this.form.unit * Number(val)) / 10000;
					this.form.amount = (this.form.totalPrice * this.form.percentage / 10).toFixed(2);
				}
			},
			// 贷款层数切换事件
			percentageSelect(e) {
				let curr = this.percentageArray.find(item => item.value == e[0].value);
				this.form.percentage = curr.value;
				this.form.amount = (curr.value * this.form.totalPrice).toFixed(2);
			},
			// 贷款年限切换事件
			yearsSelect(e) {
				this.form.years = e[0].value;
			},
			// 基准利率
			baseRateSelect(e) {
				let curr = this.rateList.find(item => item.value == e[0].value);
				this.form.baseRate = 0.049 * curr.key;
				this.form.rateNum = (0.049 * curr.key * 100).toFixed(2);
			},
			hideKeyboard() {
				uni.hideKeyboard();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.busin-container {
		min-height: 900rpx;
		background-color: #ffffff;

		.selectItem {
			width: 100%;
		}

		.dengyu {
			text-align: right;
			padding: 30rpx;
		}
	}
</style>